import React, {  useState} from 'react'
import axios from 'axios'
import store from './store'
import { userInfoAction } from './store/actionCreators'
import { connect } from 'react-redux'

class Demo extends React.Component {
  render() {
    return <h1>{this.props.token}</h1>
  }
}

let ConnectDemo = connect((state)=>{
  console.log(state)
  return {
    token: state.wdata&&state.wdata.oauth_token||""
  }
}, null)(Demo)

const App = ()=> {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')

  let handleClick = ()=> {
    console.log(username, password)
    axios.post('http://s.linweiqin.com/api/s/loginCheck', {
      username,
      password
    }).then(res=>{
      console.log(res.data)
      store.dispatch(userInfoAction(res.data.wdata))
    })
  }

  return (
    <div>
      <input 
        type="text"
        placeholder='账号'
        value={username}
        onChange={(e)=>setUsername(e.target.value)}/><br/>
      <input 
        type="password"
        placeholder='密码'
        value={password}
        onChange={(e)=>setPassword(e.target.value)}/><br/>
      <button onClick={handleClick}>登录</button>
      <button>获取仓库中的值</button>
      <ConnectDemo />
    </div>
  )
}

// class App extends React.Component {
//   state = {
//     username: "",
//     password: "",
//   };
//   handleClick = (params) => {
//     console.log(this.state.username, this.state.password);
//     axios
//       .post("http://s.linweiqin.com/api/s/loginCheck", {
//         username: this.state.username,
//         password: this.state.password,
//       })
//       .then((res) => {
//         console.log(res.data);
//         // 如何将res.data.wdata 存到 redux 中？
//         store.dispatch(userInfoAction(res.data.wdata));
//       });
//   };
//   handleChange = (e) => {
//     this.setState({
//       [e.target.dataset.key]: e.target.value,
//     });
//   };
//   render() {
//     return (
//       <div>
//         <input
//           onChange={this.handleChange}
//           type="text"
//           data-key="username"
//           value={this.state.username}
//           placeholder="账号"
//         />
//         <input
//           onChange={this.handleChange}
//           type="password"
//           data-key="password"
//           placeholder="密码"
//           value={this.state.password}
//         />
//         <button onClick={this.handleClick}>登录</button>
//         <button onClick={()=>{
//           console.log(store.getState());
//         }}>获取仓库中值</button>
//         <ConnectDemo></ConnectDemo>
//       </div>
//     );
//   }
// }

export default App